<template>	
	<view id="integral" v-if="">
		<Header txt="积分乐园" v-if='baidu'></Header>
		<HeaderB txt="积分乐园" v-if='!baidu'></HeaderB>
		<view class="bg-top">
			<view class="context">
				<view class="logo">
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86logo.png" mode="aspectFit"></image>
				</view>
				<view class="text" @click="goPage('pagesA/active/integralSubsidiary')">我的积分</view>
				<view class="number" @click="goPage('pagesA/active/integralSubsidiary')">{{ points }}</view>
				<text class="op"  @click="goPage('pagesA/active/integralSubsidiary')">→</text>
			</view>	
			<view class="top-gift">
				<view class="" @click="goPage('pagesA/user/myGift')">我的礼品</view>
			</view>
			<view class="through" >
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				    <swiper class="swiper-box" @change="change">
				        <swiper-item>
				            <view class="swiper-item item topy" >
								做任务赚积分
				            </view>
							<view
							  class="topy"
							  @click="goPage('pagesA/active/taskIntegral')"
							>
							  <text class="integral_sign_text01">更多任务</text>
							  <view class="integral_sign_img">
								  <image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E5%BE%85%E9%A2%86%E7%A7%AF%E5%88%86.png" mode="aspectFit"></image>
							  </view>
								<text> 〉</text>
							</view>               
							<view class="task_list clearfix" v-for="(item, index) in task" :key="index" v-if="item.id != 18">
								<view class="task_list_img">
									<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%AE%A4%E8%AF%81.png" mode="aspectFit" v-if="item.id == 15"></image>
									<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%B4%AD%E4%B9%B0.png" mode="aspectFit" v-if="item.id == 16"></image>
									<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E9%82%80%E8%AF%B7.png" mode="aspectFit" v-if="item.id == 17"></image>
								</view>
								<view class="task_list_add">
									<view class="task_list_name">{{ item.channelName }}</view>
									<view class="task_list_num">+{{ item.point }}</view>
								</view>
								<view class="task_list_right">
									<view class="task_list_btn" v-if="item.isDone == 1" @click="receivePoints(2, item.id)">
									  领取积分
									</view>
									<view class="task_list_btn01" v-if="item.isDone == 0 && item.channelName == '完成实名认证'" @click="goPage('pages/user/certIput')">
									  去完成
									</view>
									<view class="task_list_btn01" v-if="item.isDone == 0 && item.channelName == '首次购买熊猫代理产品'" @click="goPage2('pages/buy/buy')">
									  去完成
									</view>
									<view class="task_list_btn01" v-if="item.isDone == 0 && item.channelName == '邀请好友'"  @click="goPage('pagesA/user/invite')">
									  去完成
									</view>
									<view class="task_list_btn02" v-show="item.isDone == 2" >已完成</view>
								</view>
							</view>						
				        </swiper-item>
						<swiper-item >
						    <view class="swiper-item item topy">
								<view class="txt-top">已连续签到</view>
								<view class="txt-top blue">{{ pointsDay }}</view>
								<view class="txt-top">天</view>								
						    </view>
							<view
							  class="topy"
							  @click="goPage('pagesA/active/taskIntegral')"
							>
							  <text class="integral_sign_text01">更多任务</text>
							  <view class="integral_sign_img">
								 <image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E5%BE%85%E9%A2%86%E7%A7%AF%E5%88%86.png" mode="aspectFit"></image> 
							  </view>
								<text>〉</text>
							</view> 
							<view class="inter_list_center_text">
								<view class="inter_list_center_date" v-for="(item, index) in dateList" :key="index">
									<view class="now_date_stute">
										<view class="now_date_add now_date_add02" v-if="item.status == '0'">
											+{{ index + 1 }}
										</view>
										<view class="now_date_add" v-if="item.status == '1'">
											+{{ index + 1 }}
										</view>
										<view class="now_date">
											{{ item.date }}
										</view>
									</view>
								</view>
								<view class="sign_btn">
									<view class="sign_btn_top" @click="receivePoints(1)" v-if="show_sign == 2" >
										签到领积分
									</view>
									<view class="sign_btn_top sign_btn_top01" v-if="show_sign == 1">
										明天再签
									</view>
								</view>                  
							</view>
						</swiper-item>
				    </swiper>
				</uni-swiper-dot>	
			</view>
			<view class="gift lucky">
				<view class="integral_coupons_tit clearfix">
				    <view class="logo logo2">
				          幸运大转盘        
				    </view>
				     <view class="relur" @click="rule">
				       <image src="../../static/other/1114.png" mode="aspectFit">
				     </view>  
					<view class="banner">
					    <swiper class="swiperlow" :indicator-dots="false" :autoplay="true" :vertical="true" :duration="500">
					        <swiper-item  class="swiper-items"  v-for="(item, index) in marqueeList2" :key="index">
					            <view class="">{{item.userName}}抽中了{{item.remark}}</view>
					        </swiper-item>
					    </swiper>	                
					</view>
				</view>
				<view class="lottery">
				    <view class="lottery-item">
				      <view class="lottery-start">
				        <view class="box" @click="luckyNumP" v-if="isclick" >
				          <p class="box-p">
				                  开始抽奖
				          </p>
				          <p class="box-tit">
				                  100积分/次
				          </p>
				        </view>
				        <view class="box box2"  v-if="!isclick" >
				          <p class="box-p">
				                  开始抽奖
				          </p>
				          <p class="box-tit ">
				                  100积分/次
				          </p>
				        </view>
				      </view>
				      <ul>
				        <li v-for="(item,i) in list" :class="i==index?'on':''" :key="i">
				          <view class="box" >
				            <image :src="item.img" mode="aspectFit">                        
				          </view>
				          <view class="text-p">
				            {{item.title}}
				          </view>
				        </li>
				      </ul>
				    </view>    
				</view>
				<!-- 中奖弹窗 -->
				<view class="mask" v-if="showToast"></view>
				<view class="mask" v-if="ruledislog"></view>
				<view class="lottery-alert lottery-alert2" v-if="ruledislog">
				  <view class="lottery-alert-relur" >				   
				    <h2 class="">活动规则</h2>
				    <view class="btnsave" @click="handleClose">
				    </view>
				    <view class="item">
				    	1. 每次抽奖扣除100积分,在我的礼品中查看中奖记录;
				    </view>
					<view class="item">
						2. 积分和订单虚拟奖品实时发放；积分在“我的积分”查看，订单在“个人中心”-“订单管理”查看;
					</view>
					<view class="item">
						3. 实物奖品请根据提示完善收获信息，工作人员将于30个工作日内寄出;
					</view>
					<view class="item">
						4.除网络异常、系统错误等情况导致抽奖异常外，抽奖一旦提交不可取消，扣除积分不予退还。
					</view>
					<button @click="handleClose">
					  我知道了
					</button>
				  </view>
				</view> 
				<view class="lottery-alert" v-if="showToast && points>100">
				  <view class="lottery-alert-img" v-if="indexNumber != 1">
				    <view class="img">
				      <image :src="list[prize2].img" mode="aspectFit">
				    </view>
				    <h2 class="">恭喜抽中</h2>
				    <h3>{{list[prize2].title}}</h3>
				    <view class="btnsave" @click="closeS">
				    </view>
				    <button @click="luckyNumP">
				      再抽一次
				    </button>
				  </view>
				  <view class="lottery-alert-img" v-if="indexNumber == 1">
				      <view class="img">
				        <image :src="list[prize2].img" mode="aspectFit">
				      </view>
				      <h2 class="">很遗憾</h2>
				      <h3>
				        暂无抽中任何奖品
				      </h3>
				      <view class="btnsave" @click="closeS"></view>
				      <button @click="luckyNumP">
				        再抽一次
				      </button>
				  </view>
				</view> 
				<view class="lottery-alert lottery-alert2" v-if="showToast&&points<100">
					<view class="lottery-alert-img" >
					    <view class="img">
					                  <!-- <img :src="list[index].img" alt=""> -->
					    </view>
					    <h2 class="">您的积分不足</h2>
					    <h3>您可以通过做任务和充值钱包获得积分</h3>
					    <view class="btnsave" @click="closeS">
					    </view>
					    <button @click="agin">
					        我知道了
					    </button>
					</view>
				</view>	
				       
			</view>
			<view class="gift">
				<view class="logo">
					<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E5%85%91%E6%8D%A2%E6%9D%83%E7%9B%8A.png" mode="aspectFit"></image>
				</view>
				<view class="banner">
				    <swiper class="swiperlow" :indicator-dots="false" :autoplay="true" :vertical="true" :duration="500">
				        <swiper-item  class="swiper-items"  v-for="(item, index) in marqueeList" :key="index">
				            <view class="">{{item.userName}}兑换了{{item.remark}}</view>
				        </swiper-item>
				    </swiper>	                
				</view>
				<swiper class="swiper" :interval="interval" :duration="duration">
					<swiper-item class='swiper-item' v-if="convertList != '' && convertList != null" v-for="(item, index) in convertList" :key="index">
					    <view class="bg_purple" @click="couponsShow(convertList[index])">
					      <view class="bg_purple_bg">
					        <view class="bg_purple_top">
					          <view class="noted_num">
					            <text class="noted_num_text">{{ item.money }}</text>
					            <text class="noted_num_icon">元</text>
					          </view>
					          <view class="noted_num_line"></view>
					          <view class="noted_num_line_tit">无门槛</view>
					        </view>
					      </view>
					      <view class="bg_purple_fen">{{ item.money }}元无门槛优惠券</view>
					      <view class="bg_purple_fen">
					        <text class="bg_purple_color">{{ item.point }}</text
					        >积分
					      </view>
					    </view>             
				    </swiper-item>
				</swiper>
				<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="2000" :duration="duration">
					<swiper-item class='swiper-item' v-if="convertList != '' && convertList != null" v-for="(item, index) in convertList03" :key="index">
					    <view class="bg_purple" @click="balanceShow(convertList03[index])">
					      <view class="bg_purple_bg ">
					        <view class="bg_purple_top bg_purple_top_wallat">
					          <view class="noted_num">
					            <text class="noted_num_text">{{ item.money }}</text>
					            <text class="noted_num_icon">元</text>
					          </view>
					          <view class="noted_num_line"></view>
					          <view class="noted_num_line_tit">钱包余额</view>
					        </view>
					      </view>
					      <view class="bg_purple_fen">{{ item.money }}元无门槛优惠券</view>
					      <view class="bg_purple_fen">
					        <text class="bg_purple_color">{{ item.point }}</text>积分
					      </view>
					    </view>             
				    </swiper-item>
				</swiper>
				<view class="integral_gift_tit">兑换礼品</view>
			   <view
			      class="bg_purple bg_purple_gift"
			      v-for="(item, index) in tableData"
			      :key="index"
			      @click="giftShow(item)"
			    >
			      <view
			        class="bg_purple_bg"
			        :style="{ background: 'url( ' + item.goodsImg + ')' }"
			      >
			        <view class="bg_purple_top bg_purple_top_gift">
			        </view>
			      </view>
			      <view class="bg_purple_fen">{{ item.goodsName }}</view>
			      <view class="bg_purple_fen">
			        <text class="bg_purple_color">{{ item.point }}</text
			        >积分
			      </view>
			    </view>     
			</view>
		</view>                       
	</view>
</template>

<script>
	import { getSwiperList } from '@/components/sn-swiper/esc-swiper/helper.js';
	export default {
		data() {
			return {
				baidu:true,
				points:333,
				pointsDay:0,
				show_sign:1,
				sign_suss:false,
				current: 0,
				mode: 'round',
				info:[{},{}],
				task:[],
				dotsStyles:{
					selectedBackgroundColor:'#007AFF',
					backgroundColor:"rgba(0, 0, 255, 0.1)",
					selectedBorder:'#007AFF'
				},
				dateList:[],
				convertList03:[],
				convertList:[],
				tableData:[],
				maxlen03:'',
				pageNum:1,
				isShow:true,
				marqueeList:[],
				ifSHow:'',
				autoplay: true,
				interval: 2000,
				duration: 500,
				isalip:true,
				marqueeList2:[],
				list: [
					{ img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/12.png", title: "很遗憾" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/1.png", title: "50积分" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/2.png", title: "100积分" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/3.png", title: "300积分" },
				  { img: "../../static/other/113.png", title: "小夜灯" },
				  { img: "../../static/other/112.png", title: "雨伞" },
				  { img: "../../static/other/77.png", title: "停车牌" },
				  { img: "../../static/other/66.png", title: "充电宝" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/8.png", title: "鼠标垫" },
				  { img: "../../static/other/116.png", title: "钥匙扣" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/10.png", title: "钱包余额" },
				  { img: "https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/11.png", title: "优惠劵" },       
				], //奖品1-12
				isStart: 1,
				score: 0, //消耗积分
				index: 0, // 当前转动到哪个位置，起点位置
				count: 12, // 总共有多少个位置
				timer: 0, // 每次转动定时器
				speed: 20, // 初始转动速度
				times: 0, // 转动次数
				cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
				prize: -1, // 中奖位置
				prize1: "", // 中奖位置
				prize2: "", // 位置
				isclick: true,
				showToast: false, //显示中奖弹窗
				animate: false,
				luckyData:[],
				indexNumber: 0,
				ruledislog:false,
			}							
		},
		onReachBottom(){
			this.loadList()	
		},
		computed:{
		},
		onShow() {
			this.getDay()
			this.getTaskList()
			this.listPointsGoods02(1)
			this.listPointsGoods(1)
			this.getUserPoints()
			this.loadList()
			this.newestUserGoods()
			this.getSignInDayTime()
			this.newestUserPrize()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
			},
		methods:{
			closeS(){
			  this.showToast=false
			  this.islucky=false
			  this.isclick=true
			  this.index=0
			},
			rule(){
			      this.ruledislog=true
			    },
			handleClose(){
			  this.ruledislog=false
			},   
			agin(){
			  this.showToast = false
			  this.index=0
			  this.isclick=true
			},       
			aginget(){
				this.showToast = false
				// this.address_list=true
				// this.islucky=true 
				let obj={
					goodsType:4,
					remark:this.list[this.indexNumber].title,
					goodsImg:this.list[this.indexNumber].img,
					pointsUserGoodsId 
				}
			},
			back(){
				uni.navigateBack()
			},
			luckyNumP(){
				let that = this
				this.showToast = false
				if(!this.isclick){
				    return
				}
				this.isclick=false
				if(this.points<100){
				    that.showToast = true;
				    setTimeout(()=>{
				        that.isclick=true
				    },1000)  
				    return
				}
				if(this.points>=100){
					that.$store
						.dispatch("LuckDraw")
						.then((response) => {
							let data = response.data;
							if (data.code == "0") {
								that.getUserPoints()
								that.indexNumber=data.obj.prizeType
								that.prize2=data.obj.prizeType-1
								that.startRoll()
								that.luckyData=data.obj
							}  
						})
				}
				// that.indexNumber=6
				// that.prize2=5
				// that.startRoll()      
			},
			oneRoll() {
			  let index = this.index; // 当前转动到哪个位置
			  const count = this.count; // 总共有多少个位置
			  index += 1;
			  if (index > count - 1) {
			    index = 0;
			  }
			  this.index = index;
			},
			    // 开始转动
			startRoll() {
			  this.times += 1; // 转动次数
			  this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
			  // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
			  if (this.times > this.cycle + 10 && this.prize === this.index) {
			    clearTimeout(this.timer); // 清除转动定时器，停止转动
			    this.prize = -1;
			    this.times = 0;
			    this.speed = 20;
			    var that = this;
			    setTimeout(res => {
			      that.isclick=true
			      that.showToast = true;
			      that.getUserPoints() 
			    }, 500);
			  } else {
			    if (this.times < this.cycle) {
			      this.speed -= 10; // 加快转动速度
			    } else if (this.times === this.cycle) {
			      this.prize = this.indexNumber - 1; //中奖位置,可由后台返回
			      this.prize1 = this.indexNumber - 1;
			    } else if (
			      this.times > this.cycle + 10 &&
			      ((this.prize === 0 && this.index === 11) ||
			        this.prize === this.index + 1)
			    ) {
			      this.speed += 100;
			    } else {
			      this.speed += 20;
			    }
			    if (this.speed < 40) {
			      this.speed = 40;
			    }
			    this.timer = setTimeout(this.startRoll, this.speed);
			  }
			},    
			newestUserPrize(){
				let that = this;
				that.$store
					.dispatch("NewestUserPrize")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.marqueeList2 = data.obj;
						}  
					})
			},
			couponsShow(row){
				let item = encodeURIComponent(JSON.stringify(row))
				uni.navigateTo({
					url: '/pagesA/active/integralDell?item=' + item
				})
			},
			balanceShow(row){
				let item = encodeURIComponent(JSON.stringify(row))
					uni.navigateTo({
						url: '/pagesA/active/integralDell?item=' + item
					})
			},
			giftShow(row){
				let item = encodeURIComponent(JSON.stringify(row))
					uni.navigateTo({
						url: '/pagesA/active/integralDell?item=' + item
					})
			},
			newestUserGoods(){
				let that = this;
				that.$store
					.dispatch("NewestUserGoods")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.marqueeList = data.obj;
						}  
					})
			},
			loadList() {
			  let that = this;
			  let obj02 = {
			    type: 3,
			    pageNum: that.pageNum,
			  };
			  that.$store
			  	.dispatch("ListPointsGoods",obj02)
			  	.then((response) => {
			  		let data = response.data;
			  		if (data.code == "0") {
						let tar = data.obj.list;
						that.tableData = [...that.tableData, ...tar];
						that.pageNum++;
						if (tar.length < 8) {
						  return ;
						}
			  		}         
			  	})
			},    
			listPointsGoods(num){
				let that = this;
				let obj = {
				  type: 1,
				  pageNum: num,
				};     
				that.$store
					.dispatch("ListPointsGoods",obj)
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							let tar=data.obj.list
							tar.forEach((item) => {
								item.ifSHow=false
							})
							that.convertList = tar;
							that.maxlen03 = data.obj.count;
						}         
					})
			},
			listPointsGoods02(num){
				let that = this;
				let obj02 = {
				  type: 2,
				  pageNum: num,
				};     
				that.$store
					.dispatch("ListPointsGoods",obj02)
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							let tar=data.obj.list
							tar.forEach((item) => {
								item.ifSHow=true
							})
							that.convertList03 = tar;
						}         
					})
			},
			goPage(e){
				uni.navigateTo({
					url: `/${e}`
				})
			},
			goPage2(e){
				uni.switchTab({
					url: `/${e}`
				})
			},
			change(e) {
			        this.current = e.detail.current;
			       },
			getDay(){
				let that=this
				that.$store
					.dispatch("GetSignInDay")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
						  let tar = data.obj;
						  tar.forEach((item) => {
						    if (item.date == "今日") {
						      if (item.status == 0) {
						        that.show_sign = 2;
						      } else {
						        that.show_sign = 1;
						      }
						    }
						  });
						  that.dateList = tar;
						}         
					})
			},
			getSignInDayTime(){
				let that=this
				that.$store
					.dispatch("GetSignInDayTime")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
						  let tar = data.obj;
						  that.pointsDay = tar
						}         
					})
			},
			getTaskList(){
				let that=this
				that.$store
					.dispatch("GetTaskList")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
						    that.task = data.obj;
						}        
					})
			},
			getUserPoints(){
				let that=this
				that.$store
					.dispatch("GetUserPoints")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.points=data.obj
						}        
					})
			},
		receivePoints(num, row) {
		      let that = this;
		      let tar = that.pointsDay + 1;
		      let obj;
		      if (num == 1) {
		        obj = {
		          signInDay: tar,
		        };
		      }
		      if (num == 2) {
		        obj = {
		          channelId: row,
		        };
		      }
		      if (num == 3) {
		        obj = {
		          rechargeSum: that.amount02,
		        };
		      }
			  that.$store
			  	.dispatch("ReceivePoints",obj)
			  	.then((response) => {
			  		let data = response.data;
			  		if (data.code == "0") {
			  		    if (num == 1) {
							that.getDay();
							that.getUserPoints();
							// that.getSignInDayTime();
			  		      setTimeout(() => {
			  		        that.sign_suss = true;
			  		      }, 300);
			  		    }
			  		    if (num == 2) {
			  		      that.getTaskList();
			  		      that.getUserPoints();
			  		    }
			  		    if (num == 3) {
			  		      that.rechargeIsReceive();
			  		      that.getUserPoints();
			  		    }        
			  		}        
			  	})
		    },	
		}
	}
</script>

<style lang="less">
#integral{
	width: 100%;
	background-color: #f7f8fa;
	padding-bottom: 2000rpx;
	overflow: hidden;
	.bg-top{
		width: 100%;
		height: 400rpx;
		position: relative;
		right: 0;
		padding-top: 40rpx;
		background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%83%8C%E6%99%AF.png') no-repeat -680rpx -450rpx;
		.context{
		    border-radius: 50px;
		    text-align: center;
		    width: 45%;
		    padding: 10rpx 0;
		    background-color: #52bfd5;
		    color: #fff;
			margin: 0rpx auto ;
			.logo{
				display: inline-block;
				vertical-align: top;
				image{
					width: 30rpx;
					height: 40rpx;
				}
			}
			.number{
				display: inline-block;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 6rpx;
				margin-right: 6rpx;   
			}
			.text{
				display: inline-block;
				margin-left: 6rpx;
			}
		}
		.top-gift{
			border-radius: 50px;
			text-align: center;
			width: 20%;
			padding: 5rpx 0;
			background-color: #52bfd5;
			color: #fff;
			font-size: 24rpx;
			margin: 0 auto;
			position: absolute;
			top: 4rpx;
			right: 20rpx;	
		}
		.sign_btn {
			// overflow: hidden;
		    margin-top: 140rpx;
		    .sign_btn_top {
		      width: 90%;
		      height: 100rpx;
			  margin: 0 auto;
		      line-height: 100rpx;
		      background-color: #3373fc;
		      border: 2rpx solid #3373fc;
		      text-align: center;
		      color: #fff;
		      font-size: 28rpx;
		      cursor: pointer;
		      border-radius: 18rpx;
		      margin-top: 70rpx;
		    }
		    .sign_btn_top01 {
		      background-color: #e3e5ea;
		      border: 1px solid #e3e5ea;
		      color: #a5a7aa;
		    }
		  }
		.alipy{
			width: 89.2%;
			height: 500rpx;
			margin: 0 auto;
			// background-color: #007AFF;
			.uni-swiper-wrapper, .swiper-box, .uni-swiper__warp{
				height: 460rpx;
			}
			.image{
				width: 85rpx;
				height: 85rpx;
				position: relative;
				z-index: 100000;
				background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E8%AE%A4%E8%AF%81.png");
			}
		}
		.through{			
			width: 89.2%;
			background-color: #fff;
			height: 500rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			position: relative;
			top: 100rpx;
			.topy{
				display: inline-block;
				width: 45%;
				position: relative;
				 .integral_sign_img {
					display: inline-block;
				   position: absolute;
				   left: 0;
				   top: -28rpx;
				   right: 40rpx;
				   image {
				     width: 80rpx;
					 height: 32rpx;
				   }
				 }       
			}
			.topy:nth-child(2){
				text-align: right;
				color: #324147;
				font-size: 26rpx;    
			}
			.uni-swiper-wrapper, .swiper-box, .uni-swiper__warp{
				width: 100% !important;
				height: 560rpx !important;
			}
			.uni-swiper__warp{
				width: 100%;
				height: 100%;
				swiper-item{
					width: 100%;
					margin: 0rpx auto;
					padding-top: 40rpx;
				}
				.item{
					padding-left: 20rpx;
				}
				.swiper-item{
					color: #324147;
					font-size: 30rpx;
					font-weight: bold;
				}    
			}
			.txt-top{
				display: inline-block;
			}
			.blue{
				color: #3f77ef;
			    font-size: 40rpx;
			    font-weight: bold;
			    padding: 0 4rpx;       
			}
		}
		.inter_list_center_text {
		    margin-top: 60rpx;
			overflow: hidden;
		  }
		  .inter_list_center_date {
		    float: left;
		    margin-left: 1.5%;
		    width: 13%;
		    text-align: center;
		    color: #c1c1c1;
		  }
		  .inter_list_center_date:first-child {
		    margin-left: 0rpx;
		  }
		  .inter_list_center_date:last-child {
		    .now_date_add::after {
		      content: "";
		      position: absolute;
		      width: 0;
		    }
		  }
		.now_date_add {
		    position: relative;
		    display: block;
		    width: 80rpx;
		    height: 80rpx;
		    border-radius: 100rpx;
		    font-size: 24rpx;
		    color: #fff;
		    background-color: #3373fb;
		    text-align: center;
		    line-height: 80rpx;
		    margin: 0 auto;
		  }
		  .now_date_add02 {
		    color: #dad8d8;
		    background-color: #f5f5f4;
		  }
		.task_list {
			width: 90%;
			height: 100rpx;
		  margin-bottom: 26rpx;
		  margin: 0 auto;
		  padding-top: 30rpx;
		  .task_list_img {
		    width: 85rpx;
			height: 85rpx;
		    float: left;
		    image{
		      width: 100%;
			  height: 100%;
		    }
		  }
		  .task_list_add {
		    float: left;
		    margin-left: 15rpx;
		    .task_list_name {
		      color: #222222;
		      font-size: 25rpx;
		      margin-top: 8rpx;
		    }
		    .task_list_num {
		      color: #ff6b05;
		      margin-top: 10rpx;
		    }
		  }
		  .task_list_right {
		    float: right;
		    .task_list_btn {
		      background-color: #3373fc;
		      color: #fff;
		      width: 160rpx;
		      height: 50rpx;
		      line-height:50rpx;
		      text-align: center;
		      border-radius: 100rpx;
		      margin-top:16rpx;
		    }
		    .task_list_btn02 {
		      background-color: #c8ccd6;
		      color: #fff;
		      width: 150rpx;
		      height: 60rpx;
		      line-height: 60rpx;
		      text-align: center;
		      border-radius: 100rpx;
		      margin-top: 20rpx;
		    }
		    .task_list_btn01 {
		      border: 2rpx solid #0069ff;
		      color: #0069ff;
		      width: 150rpx;
		      height: 60rpx;
		      line-height: 60rpx;
		      text-align: center;
		      border-radius: 100rpx;
		      margin-top: 20rpx;
		    }
		  }
		}
		.lucky{
			width: 90%;
			margin: 160rpx auto 0;
			.logo2{
				display: inline-block;
				// width: 180rpx;	
				width: 170rpx !important;
			}
				
			.relur{
				display: inline-block;
				box-sizing: border-box;
				position: relative;
				top: 10rpx;
				// width: 40%;
				// padding-top: 28rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					
				}
			}
			.banner{
				position: relative;
				top: 10rpx;
				left: 200rpx;
			}
		}
		.gift{
			width: 90%;
			margin: 0 auto;
			margin-top: 160rpx;
			.integral_gift_tit {
			  color: #324147;
			  font-size: 30rpx;
			  font-weight: bold;
			  margin-top: 20rpx; 
			  margin-bottom: 20rpx;
			}    
			.logo{
				display: inline-block;
				width: 60%;
				margin: 20rpx 0;
				color: #324147;
				font-size: 30rpx;
				font-weight: bold;
				image{
					width: 130rpx;
					height: 26rpx;
				}
			}
			.swiper{
				margin-bottom: 20rpx;
				height: 300rpx;
			}
			.banner{
				display: inline-block;
				width: 40%;
				height: 42rpx;
				overflow:hidden;
			}
			.uni-swiper-wrapper,.uni-swiper-slides,.uni-swiper-slide-frame{
				display: inline-block;
				width: 40%;
				height: 42rpx !important;
			}
			.swiperlow{
				height: 42rpx;
			}
			.swiper-items{
				display: inline !important;
				font-size: 28rpx;
				color: #b94026;
				white-space: nowrap !important;
				overflow: hidden;
			}
			.swiper-item{				
				width: 40% !important;
				float: left;
				background-color: #FFFFFF;
			}
			.bg_purple_gift {
			  float: left;
			  width: 47.5%;
			  background-color: #fff;
			  border-radius: 18rpx;
			  margin-bottom: 29rpx;
			  .bg_purple_bg {
			    height: inherit;
			    background-color: #eaeaea;
			    border-top-left-radius: 18rpx;
			    border-top-right-radius: 18rpx;
			    background-size: 85% !important;
			    background-repeat: no-repeat !important;
			    background-position: center center !important;
			    background-color: #eaeaea !important;
			    .bg_purple_top {
			      height: inherit;
			    }
			  }
			} 
		  .bg_purple_gift:nth-child(2n) {
		    margin-right: 0rpx;
			margin-right: 5%;
		  }
		  .bg_purple_gift:n {
		    float: left;
		    width: 48%;
		    background-color: #fff;
		    // margin-right: 2%;
		    .bg_purple_bg {
		      height: inherit;
		      .bg_purple_top {
		        height: inherit;
		      }
		    }
		  }
		}
	}
	  .bg_purple {
	    width: 100%;
	    padding-bottom: 20rpx;
	    .bg_purple_bg {
	      width: 100%;
	      height: 170rpx;
	    }
	    .bg_purple_prise {
	      background-color: #ffffff;
	      width: 100%;
	      height: 200rpx;
	      overflow: hidden;
	      img {
	        width: 100%;
	      }
	    }
	    .bg_purple_fen {
	      font-size: 28rpx;
	      color: #222222;
	      text-align: left;
	      margin-top: 20rpx;
	      padding-left: 15rpx;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }
	    .fen_btn {
	      text-align: center;
	      .dui_btn {
	        width: 138rpx;
	        height: 60rpx;
	        line-height: 60px;
	        background-color: #ff6e16;
	        padding: 0;
	        margin-top: 14rpx;
	        border: none;
	      }
	    }
	    .bg_purple_color {
	      font-size: 14px;
	      color: #ff7017;
	    }
	    .bg_purple_top {
	      width: 100%;
	      height: 200rpx;
	      background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E5%85%91%E6%8D%A2%E6%97%A0%E9%97%A8%E6%A7%9B.png") no-repeat center center;
	      background-size: 80%;
	      // background-position: 20px 17px;
	      text-align: center;
	      .noted_num {
	        padding-top: 40rpx;
	      }
	      .noted_num_line {
	        border-top: 2rpx dashed #fff;
	        width: 100rpx;
	        margin: 0 auto;
	        height: 0;
	        margin-top: 16rpx;
	      }
	      .noted_num_line_tit {
	        color: #fff;
	        font-size: 20rpx;
	        font-weight: normal;
	        margin-top: 10rpx;
	      }
	      .noted_num_icon {
	        font-size: 30rpx;
	        color: #fff;
	      }
	      .noted_num_text {
	        font-size: 50rpx;
	        font-weight: bold;
	        color: #fff;
	        padding-right: 10rpx;
	      }
	    }
	    .bg_purple_top_gift {
	      background: none;
	      padding-top:30rpx;
	      height: 230rpx !important;
	      overflow: hidden;
	      img {
	        width: 80%;
	      }
	    }
	    .bg_purple_top_wallat {
	      background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E5%85%91%E6%8D%A2%E9%92%B1%E5%8C%85%E4%BD%99%E9%A2%9D.png") no-repeat center center;
	      background-size: 80%;
	      .noted_num_icon {
	        font-size: 20rpx;
	        color: #ee5932;
	      }
	      .noted_num_text {
	        color: #ee5932;
	      }
	      .noted_num_line {
	        display: none;
	      }
	      .noted_num_line_tit {
	        margin-top: 30rpx;
	      }
	    }
	  }
	.lottery {
	    animation: changeBg 0.5s ease infinite;
	    overflow: hidden;
	    width: 100%;
	    height: 700rpx;
	    padding: 0;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    float: left;
	    display: block;
	  }
	    .lottery .lottery-item {
	    height:700rpx;
	    position: relative;
	  }
	  .lottery .lottery-item ul li {
	    width: 23%;
	    height:23%;
	    background: #F1F1F1;
	    border-radius: 12rpx;
	    position: absolute;
	    left: 0;
	    list-style: none;
	  }
	.lottery .lottery-item ul li:nth-child(1) {
	  	image{
	  		width: 80rpx;
	  		height: 90rpx;
	  	}
	}
	.lottery .lottery-item ul li:nth-child(2) {
	    left: 25%;
		image{
			width: 82rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(3) {
	    left: 50%;
		image{
			width: 90rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(4) {
	    left: 75%;
		image{
			width: 80rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(5) {
	    left: 75%;
	    top: 25%;
		image{
			width: 80rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(6) {
	    left:75%;
	    top: 50%;
		image{
			width: 80rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(7) {
	    left: 75%;
	    top: 75%;
		image{
			width: 80%;
			height: 44rpx;
		}
	  }
	   .lottery .lottery-item ul li:nth-child(7) .box{
	    box-sizing: border-box;
	    padding-top: 46rpx;
	  }
	  .lottery .lottery-item ul li:nth-child(8) {
	    left:50%;
	    top:  75%;
		image{
			width: 80rpx;
			height: 84rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(9) {
	    left: 25%;
	    top:  75%;
		image{
			width: 80rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(10) {
	    left: 0px;
	    top:  75%;
		image{
			width: 80rpx;
			height: 90rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(11) .box{
	     box-sizing: border-box;
	    padding-top: 20rpx;
		image{
			width: 90rpx;
			height: 80rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(11) {
	    left: 0px;
	    top:  50%;
	  }
	  .lottery .lottery-item ul li:nth-child(12) .box{
	     box-sizing: border-box;
	    padding-top: 20rpx;
		image{
			width: 90rpx;
			height: 80rpx;
		}
	  }
	  .lottery .lottery-item ul li:nth-child(12) {
	    left: 0px;
	    top: 25%;
	  }
	    .lottery .lottery-item ul li .box {
	    height: 100rpx;
	    position: relative;
	    text-align: center;
	    overflow: hidden;
	    padding-top: 16rpx;   
	    border-radius: 14rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	  }
	    .lottery .lottery-item ul li .text-p{
	      font-size: 30rpx;
	      font-family: Microsoft YaHei;
	      font-weight: 400;
	      color: #666666;
	      line-height: 40rpx;
	      text-align: center;
	  }
	  .lottery .lottery-item ul li .box p {
	    text-align: center;
	    color: #d3272c;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    font-size: 46rpx;
	    padding: 0;
	    margin: 0;
	  }
	    .lottery .lottery-item ul li.on {
	    background: #FFECD3;
	  }
	  .lottery .lottery-item ul li.on  {
	    color: #fff;
	  }
	  .lottery .lottery-item .lottery-start {
	    position: absolute;
	    width: 40%;
	    height: 40%;
	    left: 49%;
	    top: 49%;
	    transform: translate(-50% , -50%);
	    -webkit-transform: translate(-50%, -50%);
	    background: #F2A94A;
	    border-radius: 12rpx;
	  }
	  .lottery .lottery-item .lottery-start .box {
	    height: 100%;
	    font-size: 28rpx;
	    color: #fff;
	    cursor: pointer;
	    text-align: center;
	    overflow: hidden;
	  }
	  .lottery .lottery-item .lottery-start .box2 {
	    background: #c8ccd6;
	  }
	  .lottery .lottery-item .lottery-start .box-p{
	      width: 100%;
	      height: 100rpx;
	      font-size: 50rpx;
	      font-family: Microsoft YaHei;
	      font-weight: bold;
	      color: #FFFFFF;
	      margin: 80rpx auto 0;
	  }
	  .lottery .lottery-item .lottery-start .box-tit{
	      font-size: 26rpx;
	      font-family: Microsoft YaHei;
	      font-weight: 400;
	      color: #FFFFFF;
	      margin-top: 10rpx;
	  }
	  .mask {
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.7);
	    position: fixed;
	    overflow: hidden;
	    z-index: 222;
	    top: 0;
	    left: 0;
	  }
	  .lottery-alert {
	    width: 560rpx;
	    height: 540rpx;
	    background: #FFFFFF;
	    border-radius: 12rpx;
	    text-align: center;
	    z-index: 10000;
	    position: fixed;
	    left: 0;
	    right: 0;
	    margin: auto;
	    top: 50%;
	    transform: translateY(-50%);
	    .img{
	      margin-top: 80rpx;
	    }
	    button{
	      width: 214rpx;
	      height: 82rpx;
	      background: #3373FC;
	      border-radius: 12rpx;
	      font-size: 32rpx;
	      font-family: Microsoft YaHei;
	      font-weight: 400;
	      color: #FFFFFF;
	      outline: none;
	      border: none;
	    }
	    .btn{
	      width: 300rpx;
	    }
	    h2{
	      font-size: 40rpx;
	      font-family: Microsoft YaHei;
	      font-weight: 400;
	      color: #333333;
	      margin: 0;
	      margin-top: 50rpx;
	
	    }
	    h3{
	      font-size: 40rpx;
	      font-family: Microsoft YaHei;
	      font-weight: 400;
	      color: #333333;
	      margin-top: 20rpx;
	      margin-bottom: 40rpx;
	    }
	  }
	  .lottery-alert2{
	    height: 360rpx;
	  }
	  .lottery-alert-txt {
	    position: absolute;
	    left: 26%;
	    bottom: 13%;
	    width: 420rpx;
	    height: 120rpx;
	    color: #fff;
	    font-size: 52rpx;
	    background-color: #fca82f;
	    line-height: 120rpx;
	    border-radius: 14px;
	  }
	  .lottery-alert h1 {
	    font-size: 36rpx;
	    font-weight: bold;
	    color: #d92b2f;
	  }
	  .lottery-alert h2 {
	    font-weight: normal;
	  }
	  .lottery-alert p {
	    color: #666;
	    font-size: 32rpx;
	    padding-top: 10rpx;
	  }
	  .lottery-alert .btnsave {
	    position: absolute;
	    width: 26rpx;
	    height: 26rpx;
	    background-size: cover;
	    background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/lucky/13.png') no-repeat center;
	    right: 5%;
	    top: 5%;
	  }
	  .lottery-alert-img{
		  text-align: center;
		.img{
			width:100%; 
			height: 100rpx;
			text-align: center;
			margin-bottom: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		button{
			width: 60%;
			margin: 20rpx auto 0;
		}
	  }
	  .lottery-alert2{
		  width: 90%;
		  height: 740rpx;
	  }
	  .lottery-alert-relur{
		  width: 90%;
		  margin: 0 auto;
		  h2{
			  margin-bottom: 10rpx;
		  }
		  .item{
			  text-align: left;
			  font-size: 34rpx;
			  font-family: Microsoft YaHei;
			  font-weight: 400;
			  margin-bottom: 10rpx;
			  color: #666666;
		  }
		  .item:nth-child(6){
			  padding-bottom: 30rpx;
			  margin-bottom: 30rpx;
			  border-bottom: 2rpx solid #F2F2F2;
		  }
		  button{
			  background-color: #007AFF;
			  margin: 0 auto;
		  }
	  }
}
</style>
